<template>
  <a-form-model ref="form_" :model="model" :rules="validatorRules_" slot="detail">
    <div class="sku-title">基本信息</div>
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="单属性与多属性" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productType">
          <a-radio-group v-model="model.productType" :disabled="originModel.productType ? true : false">
            <a-radio value="2">多属性</a-radio>
            <a-radio value="1">单属性</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="SPU" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spuCode">
          <a-input v-model.trim="model.spuCode" placeholder="请输入SPU" disabled ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="产品中文名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
          <a-input v-model.trim="model.name" placeholder="请输入产品中文名称"  ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="产品类目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
          <a-tree-select
            allow-clear
            v-model="model.categoryId"
            :replaceFields="replaceFields"
            :filterTreeNode="filterTreeNode"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData"
            placeholder="请选择产品类目"
            tree-default-expand-all
          >
          </a-tree-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="供应商货号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierItemNum">
          <a-input v-model.trim="model.supplierItemNum" placeholder="请输入供应商货号"  ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="16">
        <a-form-model-item label="英文标题" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 20 }}" prop="title">
          <a-input v-model.trim="model.title" placeholder="请输入英文标题" ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="重量(g)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weight">
          <a-input-number v-model="model.weight" placeholder="请输入重量(g)" :precision="2" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="来料包装" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="incomingPackage">
          <j-dict-select-tag
            v-model="model.incomingPackage"
            dictCode="product_sku_incoming_package"
            placeholder="请选择来料包装"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="保护包装" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="protectPackage">
          <j-dict-select-tag
            v-model="model.protectPackage"
            dictCode="product_sku_protect_package"
            placeholder="请选择保护包装"
          />
        </a-form-model-item>
      </a-col>
      <!-- 当上方单属性与多属性选择为单属性时，显示此字段 -->
      <a-col :span="8" v-if="model.productType === '1'">
        <a-form-model-item label="颜色" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="color">
          <a-input v-model.trim="model.color" placeholder="请输入颜色"  ></a-input>
        </a-form-model-item>
      </a-col>
      <!-- 当上方单属性与多属性选择为单属性时，显示此字段 -->
      <a-col :span="8" v-if="model.productType === '1'">
        <a-form-model-item label="尺寸" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="size">
          <a-input v-model.trim="model.size" placeholder="请输入尺寸"  ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="特性标签" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tagList">
          <j-multi-select-tag
            placeholder="请选择特性标签"
            v-model="model.tagList"
            :options="tagOptions"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="产品来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="source">
          <j-dict-select-tag
            v-model="model.source"
            dictCode="product_sku_source"
            placeholder="请选择产品来源"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="包含" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="includedItem">
          <a-input v-model.trim="model.includedItem" placeholder="请输入包含内容"  ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="电池配置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="batteryConfig">
          <j-dict-select-tag
            v-model="model.batteryConfig"
            dictCode="product_sku_battery_config"
            placeholder="请选择电池配置"
          />
        </a-form-model-item>
      </a-col>
      <!-- 电池配置选择带电发货后，显示此字段，显示后为必填项 -->
      <a-col :span="8" v-if="model.batteryConfig === '1'">
        <a-form-model-item label="电池型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="batteryModel">
          <a-input v-model.trim="model.batteryModel" placeholder="请输入电池型号"  ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="特殊要求" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specialRequirement">
          <a-input v-model.trim="model.specialRequirement" placeholder="请输入特殊要求"  ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="是否定制" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isCustomize">
          <j-dict-select-tag type="radio" placeholder="请选择是否定制" v-model="model.isCustomize" dictCode="yn" style="height: 32px;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="版型编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="patternId" :rules="model.isCustomize === '1' ? [{required: true, message: '请选择版型编号!'}] : []">
          <j-search-select-tag
            placeholder="请选择版型编号"
            v-model="model.patternId"
            :dictOptions="patternOptions"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="参考链接" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="referenceLink">
          <a-input v-model="model.referenceLink" placeholder="请输入参考链接" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
          <a-textarea v-model="model.remark" rows="3" placeholder="请输入备注" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="产品视频" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 }}" prop="video">
          <j-upload-oss v-model="model.video" fileType="video" bizPath="product" class="video-custom"></j-upload-oss>
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { getAction } from '@/api/manage';
import { productMixins } from '@/views/productLibrary/mixins/productMixins';
export default {
  name: 'SkuBasicInformation',
  mixins:[ productMixins ],
  props: {
    model: {
      type: Object,
      default: () => {}
    },
    originModel: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return{
      patternOptions: [],
      tagOptions: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      validatorRules_: {
        productType: [
          { required: true, message: '请选择单属性与多属性!'},
        ],
        spuCode: [
          { required: true, message: '请输入SPU!'},
        ],
        name: [
          { required: true, message: '请输入产品中文名称!'},
        ],
        categoryId: [
          { required: true, message: '请选择产品类目!'},
        ],
        title: [
          { required: true, message: '请输入英文标题!'},
        ],
        weight: [
          { required: true, message: '请输入重量(g)!'},
        ],
        incomingPackage: [
          { required: true, message: '请选择来料包装!'},
        ],
        color: [
          { required: true, message: '请输入颜色!'},
        ],
        source: [
          { required: true, message: '请选择产品来源!'},
        ],
        includedItem: [
          { required: true, message: '请输入包含内容!'},
        ],
        batteryConfig: [
          { required: true, message: '请选择电池配置!'},
        ],
        batteryModel: [
        { required: true, message: '请选择电池型号!'},
        ]
      },
      url: {
        patternList: "/hzkj-product/product/productLibrary/pattern/list",
        tagList: "/hzkj-product/product/productLibrary/tag/list",
      }
    }
  },
  created(){
    this.loadData_('', 'queryMyCategory');
    this.getPatternList();
  },
  watch: {
    model: {
      handler(val){
        this.tagList();
      }
    }
  },
  methods: {
    getPatternList(){
      let params = {
        column: 'createTime',
        order: 'desc',
        pageNo: 1,
        pageSize: 9999
      }
      getAction(this.url.patternList, params).then((res) => {
        if(res.success){
          let patternOptions = (res.result && res.result.records) || [];
          // 过滤已确认的数据
          patternOptions = patternOptions.filter(item => {
            return item.patternStatus === 2 && (item.createBy === Vue.ls.get(USER_INFO).username || item.id === this.model.patternId);
          });
          this.patternOptions = patternOptions.map(item => {
            return {
              value: item.id,
              text: item.code
            }
          })
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    getTagList(){
      let tagList = this.tagOptions.filter(item => {
        return this.model.tagList.indexOf(item.value) > -1;
      })
      tagList = tagList.map(item => {
        return {
          id: item.value,
          name: item.text 
        }
      })
      return tagList || [];
    },
    getInformationList(){
      return new Promise((resolve, reject) => {
        this.$refs.form_.validate(valid => {
          if(valid){
            resolve(true);
          }else{
            resolve(valid);
          }
        })
      })
    },
    tagList(){
      // 获取实时标签+产品关联的注意标签
      let params = {
        column: 'createTime',
        order: 'desc',
        pageNo: 1,
        pageSize: 9999,
        includeIds: this.model.tagList
      }
      getAction(this.url.tagList, params).then((res) => {
        if(res.success){
          let tagOptions = (res.result && res.result.records) || [];
          tagOptions = tagOptions.filter(item => item.type === 2);
          this.tagOptions = tagOptions.map(item => {
            return {
              ...item,
              text: item.name,
              value: item.id
            }
          })
        }else{
          this.$message.warning(res.message);
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.video-custom{
  width: 100%;
  /deep/.ant-upload{
    display: block;
  }
  /deep/.file-list-box:nth-child(4n + 2){
    margin: 4px 4px 4px 0;
  }
  /deep/.file-list-box{
    float: left;
    width: calc((100% - 60px) / 4);
  }
}
</style>